import {
  Text,
  StyleSheet,
  View,
  Image,
  TouchableOpacity,
  ImageBackground,
} from "react-native";
import React, { useState } from "react";
import PageContainer from "@/components/PageContainer";
import { useRouter } from "expo-router";
import useUser from "@/hooks/useUser";
import QRCode from "react-native-qrcode-svg";
import { LinearGradient } from "expo-linear-gradient";
import { copyToClipboard } from "@/uitls/common";
import { useTranslation } from "react-i18next";

export default function Invite() {
  const router = useRouter();
  const { user } = useUser();
  const { t } = useTranslation();

  return (
    <PageContainer>
      <View className="bg-[#000] flex-1 p-[13px]">
        <View className="items-center flex-row h-[46px]">
          <TouchableOpacity onPress={() => router.back()}>
            <Image
              source={require("@/assets/images/return-left.png")}
              className="w-[18px] h-[18px]"
            />
          </TouchableOpacity>
          <View className="flex-1 flex-row justify-center">
            <Text className="text-[#fff] text-[18px]">
              {t("invite.invite_friends")}
            </Text>
          </View>
          <View className="w-[18x] h-[18px]"></View>
        </View>
        <View
          className="mt-[48px] h-[508px]"
          style={{
            // 添加外边框
            borderWidth: 1,
            borderColor: "#ccc",
            // 添加圆角
            borderRadius: 10,
            overflow: "hidden",
          }}
        >
          <ImageBackground
            source={require("@/assets/images/invite.png")}
            style={{ width: "100%", height: 508 }}
            imageStyle={{ resizeMode: "cover" }}
          >
            <View className="p-[12px]">
              <View className="flex-row justify-between">
                <View className="flex-1 flex-row gap-[10px] items-center">
                  <Image
                    source={require("@/assets/images/my(1).png")}
                    className="w-[55px] h-[55px] rounded-full"
                  />
                  <View>
                    <Text className="text-[#FDEAC1] text-[18px] font-bold">
                      {user.info?.nickName}
                    </Text>
                    <Text className="text-[#FDEAC1] text-[14px] mt-[5px]">
                      {t("invite.code")}:Y8940483
                    </Text>
                  </View>
                </View>
              </View>
              <View className="flex-row w-full justify-center mt-[58px]">
                <View className="bg-[#fff] p-[13px]">
                  <QRCode
                    value={
                      "https://btc021.com/pages/user/other/register?code=Y894048"
                    }
                    size={215}
                    color="black"
                    backgroundColor="white"
                  />
                </View>
              </View>
              <Text className="text-[#FDEAC1] text-[14px] text-center mt-[5px]">
                — {t("invite.invitation_address")} —
              </Text>
              <Text className="text-[#898B81] text-[14px] mt-[5px]">
                {"https://btc021.com/pages/user/other/register?code=Y8940483"}
              </Text>
              <TouchableOpacity
                onPress={() =>
                  copyToClipboard(
                    "https://btc021.com/pages/user/other/register?code=Y8940483"
                  )
                }
              >
                <LinearGradient
                  style={styles.bbtn}
                  colors={["#F4DDC3", "#E6B79A"]}
                  start={{ x: 0, y: 0 }}
                  end={{ x: 1, y: 0 }}
                >
                  <Text className="text-[#1F110F] text-[16px] font-bold">
                    {t("invite.copy_address")}
                  </Text>
                </LinearGradient>
              </TouchableOpacity>
            </View>
          </ImageBackground>
        </View>
      </View>
    </PageContainer>
  );
}

const styles = StyleSheet.create({
  bbtn: {
    height: 50,
    borderRadius: 30,
    justifyContent: "center",
    alignItems: "center",
    width: "100%",
    marginTop: 10,
  },
});
